<template>
  <div>
    <!-- 卡片一：扫二维码 -->
    <div class="card bg-light mt-3">
      <div class="card-body d-flex">
        <img src="../../assets/images/CSDN.png" width="120px" alt="">
        <div class="ms-5">
          <p>&bull; 技术干货分享</p>
          <p>&bull; 免费资料领取</p>
          <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
        </div>
      </div>
    </div>

    <!-- 卡片二：联系方式 -->
    <div class="card bg-light mt-3">
      <div class="card-body">
        <h5>社交</h5>
        <hr/>
        <p>QQ: 876767656</p>
        <p>邮箱: bilibili@qq.com</p>
      </div>
    </div>

    <!-- 广告图 -->
    <img class="mt-3" src="../../assets/images/g1.gif" alt="" style="height: 130px; width: 100%;">

    <!-- 卡片三：文章分类 -->
    <div class="card bg-light mt-3">
      <div class="card-body">
        <h5>分类</h5>
        <hr/>

        <p v-for="item in listData">
          <a :href="'./index.html?typeId='+item.id" class="card-link text-decoration-none text-primary">
            {{ item.typeName }} <span style="color: gray">({{ item.num }})</span>
          </a>
        </p>
      </div>
    </div>

    <!-- 卡片四：归档 -->
    <div class="card bg-light mt-3">
      <div class="card-body">
        <h5>归档</h5>
        <hr/>
        <p>
          <a href="./blog-archives.html" class="card-link text-decoration-none text-primary">
            2022年6月 <span style="color: gray">(2)</span>
          </a>
        </p>
        <p>
          <a href="./blog-archives.html" class="card-link text-decoration-none text-primary">
            2023年8月 <span style="color: gray">(2)</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      listData: []
    };
  },
  methods: {
    getArticleTypeCount() {
      var data = {
        num: this.num,
        typeName: this.typeName,
      }
      this.$http.get("/article/articleTypeCount", data).then(res => {
        this.listData = res.data.data
      })
    },

  },
  mounted() {
    this.getArticleTypeCount();
  },
}
</script>

<style></style>
